<template>
    <!-- 核销管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="预约状态：">
                    <el-select v-model="formInline.status" placeholder="请选择" clearable style="width: 100px;">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="待核销" value="1"></el-option>
                        <el-option label="已核销" value="2"></el-option>
                        <el-option label="已取消" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付状态：">
                    <el-select v-model="formInline.pay_status" placeholder="请选择" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="待支付" value="1"></el-option>
                        <el-option label="待预约" value="2"></el-option>
                        <el-option label="待核销" value="3"></el-option>
                        <el-option label="已核销" value="4"></el-option>
                        <el-option label="退款中" value="5"></el-option>
                        <el-option label="已取消" value="6"></el-option>
                        <el-option label="已失效" value="7"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联订单编号：">
                    <el-input v-model="formInline.order_no" placeholder="请输入搜索订单编号"></el-input>
                </el-form-item>
                <el-form-item label="课程搜索：">
                    <el-input v-model="formInline.course_name" placeholder="请输入搜索课程名称"></el-input>
                </el-form-item>
                <el-form-item label="所属门店:">
                    <el-select v-model="formInline.store_id" filterable placeholder="请选择门店">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.id" v-for="item in storeList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教练:">
                    <el-select v-model="formInline.teacher_id"  filterable placeholder="请选教练">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.nickname" :value="item.id" v-for="item in teacherList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式搜索：">
                    <el-input v-model="formInline.user_mobile" placeholder="请输入搜索联系方式"></el-input>
                </el-form-item>
                <el-form-item label="核销日期:">
                    <el-date-picker v-model="formInline.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="更新时间:">
                    <el-date-picker v-model="formInline.updated_at" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>

            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData"
                      :summary-method="getSummaries"
                      show-summary
                      max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="ID" width="60"></el-table-column>
                <el-table-column prop="order_no" align="center" label="关联订单编号">
                    <template slot-scope="scope">
<!--                        <a class="buttonText" :href="'/#/user_course?order_no='+scope.row.order_no">-->
                            {{ scope.row.order_no }}
<!--                        </a>-->
                    </template>
                </el-table-column>
                <el-table-column prop="course_name" align="center" label="课程名称">
                    <template slot-scope="scope">
<!--                        <a class="buttonText" :href="'/#/course?id='+scope.row.course_id">-->
                            {{ scope.row.course_name }}
<!--                        </a>-->
                    </template>
                </el-table-column>
                <el-table-column prop="user_nickname" align="center" label="用户姓名"></el-table-column>
                <el-table-column prop="mobile" align="center" label="联系方式"></el-table-column>
                <el-table-column prop="date" align="center" label="核销日期"></el-table-column>
                <el-table-column prop="num" align="center" label="节数"></el-table-column>
                <el-table-column prop="price" align="center" label="单价"></el-table-column>
                <el-table-column prop="money" align="center" label="金额"></el-table-column>
                <el-table-column prop="status_name" align="center" label="预约状态"></el-table-column>
                <el-table-column prop="user_course_status_name" align="center" label="支付状态"></el-table-column>
                <el-table-column prop="admin_nickname" align="center" label="核销操作人"></el-table-column>
                <el-table-column prop="created_at" align="center" label="创建时间"></el-table-column>
                <el-table-column prop="updated_at" align="center" label="更新时间"></el-table-column>

                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 1" size="mini" type="success"
                                   @click="handleCancel(scope.row)">
                            取消预约
                        </el-button>
                        <el-button v-if="scope.row.status == 2" size="mini" type="success"
                                   @click="handleCancelUsed(scope.row)">
                            取消核销
                        </el-button>
                        <el-button v-if="scope.row.status == 1 && scope.row.user_course_status>1 && scope.row.user_course_status<7" size="mini" type="success"
                                   @click="handleUse(scope.row)">
                            核销
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!--预约弹窗 -->
        <el-dialog title="预约" :visible.sync="dialogDate">
            <el-form :model="form" :rules="rules">
                <el-row>

                    <el-form-item label="报名编号:" prop="order_no">
                        {{ form.order_no }}
                    </el-form-item>

                    <el-form-item label="剩余节数:" prop="left_num">
                        {{ form.left_num }}
                    </el-form-item>

                    <el-form-item label="课程名称:" prop="order_no">
                        {{ form.course_name }}
                    </el-form-item>

                    <el-form-item label="开课时间:">
                        每周
                        <el-select v-model="form.week" placeholder="请选择" disabled>
                            <el-option label="一" :value="1"></el-option>
                            <el-option label="二" :value="2"></el-option>
                            <el-option label="三" :value="3"></el-option>
                            <el-option label="四" :value="4"></el-option>
                            <el-option label="五" :value="5"></el-option>
                            <el-option label="六" :value="6"></el-option>
                            <el-option label="日" :value="7"></el-option>
                        </el-select>&nbsp;&nbsp;
                        <el-time-picker disabled placeholder="选择开始时间" format="HH:mm:ss"
                                        value-format="HH:mm:ss" v-model="form.start_time"
                                        style="width: 25%;"></el-time-picker>
                        -
                        <el-time-picker disabled placeholder="选择结束时间" format="HH:mm:ss"
                                        value-format="HH:mm:ss" v-model="form.end_time"
                                        style="width: 25%;"></el-time-picker>

                    </el-form-item>
                    <el-form-item label="预约具体日期:" prop="date_info">
                        <el-date-picker @change="handleChangeDate"
                                        style="width: 80%;"
                                        v-model="form.date_info"
                                        type="dates"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择一个或多个日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="单次人数:" prop="num">
                        <el-input v-model="form.num" type="number" min="1" style="width: 313px;"
                                  @change="handleChangeNum">
                            <template slot="append">人</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="总计消耗:">
                        {{ form.total_num }}节
                    </el-form-item>


                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitFormData">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

import {isEmpty} from "../../../api/http";

export default {
    name: "user_course_info",
    data() {
        return {
            formInline: {
                pay_status:"",
                status: "",
                order_no: "",
                course_name: "",
                user_mobile: "",
                user_nickname: "",
                date:"",
                store_id:"",
                teacher_id:"",
            },
            tableData: [
                {
                    id: 1,
                    name: "社区体能课（周一）",
                    type: "体能课程",
                    image: "/",
                    time: "每星期一17:00~18:00",
                    address: "宝安区四季公园",
                    desc: "这个课程是有助于儿童健康成长",
                    status: 1,
                },
            ],
            id: 0,
            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,
            //预约
            isDate: 0,
            dialogDate: false,
            form: {
                id: 0,
                order_no: '',
                course_name: '',
                week: '',
                start_time: '',
                end_time: '',
                time_info: [],
                date_info: [],
                left_num: 0,
                num: 1,
                total_num: 0,
            },
            rules: {
                num: [{required: true, message: "请输入单次人数", trigger: "blur"}],
                date_info: [{required: true, message: "选择预约具体日期", trigger: "blur"}],
            },
            dataTotal:{
                title:'总计',
                num:0,
                money:0,

            },
            storeList:{},
            teacherList:{},


        };
    },
    created() {
        this.formInline.order_no = this.$route.query.order_no;
        this.isDate = this.$route.query.isDate;
        if (this.isDate == 1) {
            this.dialogDate = true;
            this.form.order_no = this.$route.query.order_no;
            this.getUserCourse();
        }
        this.getUserCourseInfoList();
        this.getStoreList();
        this.getTeacherList();
    },
    activated() {
        this.formInline.order_no = this.$route.query.order_no;
        this.isDate = this.$route.query.isDate;
        if (this.isDate == 1) {
            this.dialogDate = true;
            this.form.order_no = this.$route.query.order_no;
            this.getUserCourse();
        }
        this.getUserCourseInfoList();
        this.getStoreList();
        this.getTeacherList();
    },
    methods: {
        getTeacherList(){
            let params ={
                role_id:3,
                status:1,
                per_page:10000,

            }
            this.$get(this.$api.adminApi, params).then((res) => {
                if (res.code == 200) {
                    this.teacherList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        getStoreList(){
            let params ={
                status:1,
                per_page:10000,

            }
            this.$get(this.$api.storeApi, params).then((res) => {
                if (res.code == 200) {
                    this.storeList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        getSummaries(param)
        {
            const sums =[];
            sums[0]=this.dataTotal.title;
            sums[6]=this.dataTotal.num;
            sums[8]=this.dataTotal.money;
            return sums;
        },
        getUserCourse() {
            this.$post(this.$api.userCourseInfoByOrderNo, {order_no: this.form.order_no}).then((res) => {
                if (res.code == 200) {
                    let row = res.data;
                    this.form.id = row.id;
                    this.form.week = row.week;
                    this.form.course_name = row.course_name;
                    this.form.start_time = row.start_time;
                    this.form.end_time = row.end_time;
                    this.form.time_info = row.time_info;
                    this.form.left_num = row.left_num;
                    console.log(this.form)
                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        getUserCourseInfoList() {
            let params = {
                page: this.page,
                per_page: this.limit,
                order_no: this.formInline.order_no,
                status: this.formInline.status,
                pay_status: this.formInline.pay_status,
                user_nickname: this.formInline.user_nickname,
                user_mobile: this.formInline.user_mobile,
                course_name: this.formInline.course_name,
                date:this.formInline.date,
                store_id:this.formInline.store_id,
                teacher_id:this.formInline.teacher_id,

            };
            if(!isEmpty(this.formInline.updated_at)){
                params.start_updated_at = this.formInline.updated_at[0];
                params.end_updated_at = this.formInline.updated_at[1];
            }
            this.$get(this.$api.userCourseInfoApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list.data;
                    this.total = res.data.list.total;
                    if(this.page !=1){
                        this.dataTotal = [];
                    }else{
                        this.dataTotal = res.data.total;
                        this.dataTotal.title ='总计';
                    }
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },

        forEachFun(str) {
            let ids = [];
            if (str.length > 0) {
                ids = str.split(",");
                ids.forEach((item, index) => {
                    ids[index] = parseInt(ids[index])

                });
            }
            return ids;

        },
        handleUse(row){
            this.$confirm("此操作将核销此次预约，是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$put(this.$api.userCourseInfoApi + '/' + row.id, {status: 2}).then((res) => {
                        if (res.code == 200) {
                            this.getUserCourseInfoList();
                            return this.$message.success(res.msg);
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });

        },

        // 取消预约
        handleCancel(row) {
            this.$confirm("此操作将取消此次预约核销,核销节数退回报名订单，是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$put(this.$api.userCourseInfoApi + '/' + row.id, {status: 3}).then((res) => {
                        if (res.code == 200) {
                            this.getUserCourseInfoList();
                            return this.$message.success("取消成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        // 取消核销
        handleCancelUsed(row) {
            this.$confirm("此操作将取消此次核销，是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$put(this.$api.userCourseInfoApi + '/' + row.id, {status: 1}).then((res) => {
                        if (res.code == 200) {
                            this.getUserCourseInfoList();
                            return this.$message.success("取消成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getUserCourseInfoList();
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getUserCourseInfoList();
        },


        // 点击查询按钮
        submitForm() {
            this.getUserCourseInfoList();
        },
        //预约具体日期变动
        handleChangeDate() {
            this.form.total_num = this.form.date_info.length * this.form.num;
            if (this.form.total_num > this.form.left_num) {
                return this.$message.error('预约消耗数不能大于' + this.form.left_num + ',请重新选择预约具体日期');
            }
        },
        handleChangeNum() {
            if (this.form.num <= 0) {
                return this.$message.error('请输入正确单次人数');
            }
            this.form.total_num = this.form.date_info.length * this.form.num;
            if (this.form.total_num > this.form.left_num) {
                return this.$message.error('预约消耗数不能大于' + this.form.left_num + ',请重新输入单次人数');
            }
        },
        cancel() {
            this.dialogDate = false;
        },
        submitFormData() {
            if (this.form.date_info.length == 0) {
                return this.$message.error('请选择预约的具体日期');
            }
            if (this.form.num <= 0) {
                return this.$message.error('请输入正确单次人数');
            }
            if (this.form.total_num > this.form.left_num) {
                return this.$message.error('预约消耗数不能大于' + this.form.left_num + ',请填写正确预约日期和单次人数');

            }
            let params = {
                id: this.form.id,
                num: this.form.num,
                date: this.form.date_info,

            };
            this.$post(this.$api.userCourseInfoApi, params).then((res) => {
                if (res.code == 200) {
                    this.dialogDate = false;
                    this.$message.success("预约成功");
                    this.getUserCourseInfoList();
                } else {
                    return this.$message.error(res.msg);
                }
            });


        },


    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.is-selected {
    color: #1989fa;
}
</style>
